import React, { Component } from 'react';
import { DownOutlined } from '@ant-design/icons'

import './main_nav.css'

import { sortProduct } from '../../utils/api'
export default class Main_nav extends Component {

    constructor(props) {
        super(props);
        this.state = {
            display: 'none',
            childList: [],
            mainTitleList: []
        }
    }

    componentDidMount() {

        let data = {}
        sortProduct(data).then((res) => {
            console.log(res, '头部商品分类菜单')

            this.setState(() => {
                return {
                    mainTitleList: res.data.data=='' ? [] : res.data.data.list
                }
            })
        })
    }

    goHomeM = () => {
        this.props.history.push('/homepage')
    }
    goListM = () => {
        this.props.history.push('/product_list')
    }

    render() {
        const { display, mainTitleList, childList } = this.state

        return (
            <div>
                <div className="main_nav_wrapper">
                    <div className="main_nav clearfix menu-position--inline logo-align--left">
                        <div className="logo-one text-align--center">
                            <div onClick={this.goHomeM.bind(this)} title="我们的生活市场">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>{React.translate('homeTitle')}</font>
                                </font>
                            </div>
                        </div>
                        <div className="nav">
                            <ul className="menu align_left clearfix">
                                {
                                    mainTitleList.map((item, index) => {
                                        return item.children != null ? (
                                            <li key={index}>
                                                <div 
                                                onClick={this.lChildM.bind(this, item.children)} 
                                                className="top_link" style={{ marginLeft: '15px' }}
                                                >
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>{item.name}</font>
                                                    </font>
                                                    <div className="down_outlined"><DownOutlined /></div>
                                                </div>
                                            </li>
                                        ) : (
                                                <li key={index}>
                                                    <div className="top_link " style={{ marginLeft: '15px' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font onClick={this.goListM.bind(this)}
                                                            style={{ verticalAlign: 'inherit' }}
                                                            >{item.name}</font>
                                                        </font>
                                                    </div>
                                                </li>
                                            )
                                    })
                                }
                                <li>
                                    <div className="search_container">
                                        <form action="">
                                            <input type="text" placeholder="搜索"/>
                                        </form>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div className="dropdown-container"
                    onMouseOver={() => this.setState({ display: "block" })}
                    onMouseOut={() => this.setState({ display: "none" })}
                    style={{ display: display }}
                >
                    <div className="dropdown_menu">
                        <div className="dropdown_content">
                            {
                                childList.map((item, index) => {
                                    return (
                                        <div className="dropdown_column" key={index}>
                                            <div className="dropdown_item">
                                                <div className="dropdown_list">{item.name}</div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    lChildM = (data) => {
        this.setState(() => {
            return {
                display: "block",
                childList: data
            }
        })
    }
}